<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <title>图片裁剪</title>
    <link rel="icon" href="../image/favicon.ico">
    <link rel="stylesheet" href="../library/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../library/cropper/cropper.css">
    <style>
        #avatar {
            width: 200px;
            height: 200px;
            border-radius: 100px
        }

        #preview {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            overflow: hidden
        }

        #avatar:hover {
            filter: alpha(Opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8
        }
    </style>
</head>
<body style="padding:15px">
<div class="layui-card">
    <div class="layui-row">
        <div class="layui-col-sm4">
            <label style="cursor:pointer;margin:10px">
                <img id="avatar" src="../image/logo.png" alt="avatar"/>
                <input type="file" id="input" name="image" accept="image/*" hidden/>
            </label>
        </div>
        <div class="layui-col-sm4">
            <div id="preview"></div>
        </div>
    </div>

    <div style="margin:10px;width:800px">
        <div class="layui-btn-group" style="margin:10px">
            <button class="layui-btn" id="crop">裁剪</button>
            <button class="layui-btn layui-btn-normal" id="rotateL">左旋转</button>
            <button class="layui-btn layui-btn-warm" id="rotateR">右旋转</button>
            <button class="layui-btn layui-btn-normal" id="scaleX">左右翻转</button>
            <button class="layui-btn layui-btn-warm" id="scaleY">上下翻转</button>
        </div>
        <img id="image" src="../image/logo.png" width="800px" alt="avatar"/>
    </div>
</div>
<script src="../library/jquery/jquery.js" charset="utf-8"></script>
<script src="../library/layui/layui.js" charset="utf-8"></script>
<script src="../library/cropper/cropper.js"></script>
<script type="text/javascript">
    var avatar = document.getElementById('avatar');
    var image = document.getElementById('image');
    var cropper = newCropper(image);

    function newCropper(image) {
        return new Cropper(image, {
            aspectRatio: 1,
            viewMode: 1,
            preview: document.getElementById('preview')
        });
    }

    $(function () {
        $("#input").on('change', function (e) {
            var files = e.target.files;

            function done(url) {
                image.src = url;
                if (cropper) {
                    cropper.replace(url);
                } else {
                    cropper = newCropper(image);
                }
            }

            if (files && files.length) {
                var file = files[0];
                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });

        $('#rotateL').on('click', function () {
            if (cropper) {
                cropper.rotate(-90);
            }
        });

        $('#rotateR').on('click', function () {
            if (cropper) {
                cropper.rotate(90);
            }
        });

        $('#scaleX').on('click', function () {
            if (cropper) {
                var scaleX = cropper.getImageData().scaleX
                cropper.scaleX(-(scaleX ? scaleX : 1));
            }
        });

        $('#scaleY').on('click', function () {
            if (cropper) {
                var scaleY = cropper.getImageData().scaleY
                cropper.scaleY(-(scaleY ? scaleY : 1));
            }
        });

        $('#crop').on('click', function () {
            if (cropper) {
                var canvas = cropper.getCroppedCanvas({
                    width: 500,
                    height: 500,
                });
                avatar.src = canvas.toDataURL();
            }
        });
    });
</script>
</body>
</html>